<template>
    <el-affix :offset="0">
        <div class="bg-white h-[64px] text-white flex pr-4 border-b border-slate-100">
            <el-tooltip class="box-item" effect="customized" :content='expandContent' placement="bottom">
                <div class="w-[60px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
                    @click='handleMenuWidth'>
                    <el-icon>
                        <Fold v-if="menuStore.menuWidth == '250px'" />
                        <Expand v-else />
                    </el-icon>
                </div>
            </el-tooltip>

            <div class="ml-auto flex">
                <!-- 跳转到首页 -->
                <el-tooltip class="box-item" effect="customized" content="回到首页" placement="bottom">
                    <div class="w-[60px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
                        @click="handleReturnIndex">
                        <el-icon>
                            <House />
                        </el-icon>
                    </div>
                </el-tooltip>
                <!-- 手动刷新页面 -->
                <el-tooltip class="box-item" effect="customized" content="刷新" placement="bottom">
                    <div class="w-[60px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
                        @click="handleRefresh">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                    </div>
                </el-tooltip>
                <!-- 全屏显示 -->
                <el-tooltip class="box-item" effect="customized" :content='screenContent' placement="bottom">
                    <div class="w-[60px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
                        @click="togglePlus">
                        <el-icon>
                            <FullScreen v-if="isFullscreen == false" />
                            <Aim v-else />
                        </el-icon>
                    </div>
                </el-tooltip>
                <!-- 用户头像与功能显示 -->
                <el-dropdown class="flex items-center justify-center" @command="handleCommand">
                    <span class="el-dropdown-link flex items-center justify-center text-gray-700 text-xs">
                        <el-avatar class="mr-2" :size="40" :src=userStore.userInfo.avatar></el-avatar>
                        {{ userStore.userInfo.username }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="updatePassword"
                                @click="addCategoryBtnClick">修改密码</el-dropdown-item>
                            <el-dropdown-item command="exitLogin">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <!-- 修改密码
        <el-dialog v-model="dialogVisible" title="修改密码" width="40%" :before-close="handleClose" :draggable="true"
            :close-on-click-modal="false" :close-on-press-escape="false">

            密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏
            <el-form ref="formRef" :rules="rules" :model="form">
                <el-form-item label="用户名" prop="username" label-width="120px">
                    输入框组件
                    <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable disabled />
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPassword" label-width="120px">
                    <el-input size="large" type="password" v-model="form.oldPassword" placeholder="请输入用户旧密码" clearable
                        show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="password" label-width="120px">
                    <el-input size="large" type="password" v-model="form.password" placeholder="请输入新密码" clearable
                        show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword" label-width="120px">
                    <el-input size="large" type="password" v-model="form.rePassword" placeholder="请确认新密码" clearable
                        show-password />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog> -->
        </div>
    </el-affix>

    <FormDialog ref="formDialogRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="用户名" prop="username" label-width="120px">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable disabled />
            </el-form-item>
            <el-form-item label="旧密码" prop="oldPassword" label-width="120px">
                <el-input size="large" type="password" v-model="form.oldPassword" placeholder="请输入用户旧密码" clearable
                    show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="password" label-width="120px">
                <el-input size="large" type="password" v-model="form.password" placeholder="请输入新密码" clearable
                    show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword" label-width="120px">
                <el-input size="large" type="password" v-model="form.rePassword" placeholder="请确认新密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>

</template>

<script setup>
import female from '@/assets/header.jpg'
import { useMenuStore } from '@/stores/menu';
import { refDebounced, useFullscreen } from '@vueuse/core';
import { ref, reactive, watch } from 'vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import { showMessage, showModel } from '@/composables/utils';
import { updateAdminPassword } from '@/api/admin/user';
import FormDialog from '@/components/FormDialog.vue';


const formDialogRef = ref(null)
//新增分类按钮点击事件
const addCategoryBtnClick = () => {
    formDialogRef.value.open()
}

const screenContent = ref("全屏显示")
//isFullscreen表示是否全屏显示 toggle用于切换全屏or非全屏
const { isFullscreen, toggle } = useFullscreen()
const togglePlus = () => {
    screenContent.value = screenContent.value === "全屏显示" ? "切出全屏" : "全屏显示"
    console.log(screenContent.value)
    toggle()
}

const expandContent = ref("收缩菜单栏")
//引入菜单store
const menuStore = useMenuStore()
//引入获取用户信息store
const userStore = useUserStore()
//icon点击事件
const handleMenuWidth = () => {
    //设置菜单栏动态宽度大小
    menuStore.handleMenuWidth()
    expandContent.value = expandContent.value === "收缩菜单栏" ? "展开菜单栏" : "收缩菜单栏"
}
//引入路由管理器
const router = useRouter()
//刷新页面
const handleRefresh = () => location.reload()
// 回到首页
const handleReturnIndex = () => router.push('/index')

const dialogVisible = ref(false)
//下拉菜单处理事件
const handleCommand = (command) => {
    //修改密码
    if (command == 'updatePassword') {
        //todo
        dialogVisible.value = true
    } else if (command == 'exitLogin') {
        //退出登录
        exitLogin()
    }
}

const exitLogin = () => {
    showModel("确认退出登录？", 'warning', '小闻温馨提示').then(() => {
        userStore.exitLogin()
        showMessage('成功退出登录')
        //跳转登录页
        router.push('/login')
    })
}

// 表单引用
const formRef = ref(null)
// 监听 Pinia store 中的某个值的变化
watch(() => userStore.userInfo.username, (newValue, oldValue) => {
      // 在这里处理变化后的值
      console.log('新值:', newValue);
      console.log('旧值:', oldValue);
      
      // 可以在这里执行任何你需要的逻辑
      // 重新将新的值，设置会 form 对象中
      form.username = newValue
});

// 修改用户密码表单对象
const form = reactive({
    username: userStore.userInfo.username || '',
    oldPassword: '',
    password: '',
    rePassword: ''
})

// 规则校验
const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        }
    ],
    oldPassword: [
        {
            required: true,
            message: '旧密码不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur',
        },
    ],
    rePassword: [
        {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur',
        },
    ]
}
const onSubmit = () => {
    //验证表单字段
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('修改密码表单验证不通过！')
            return false
        }
        //显示加载条
        formDialogRef.value.showBtnLoading()
        if (form.password != form.rePassword) {
            //两次输入密码不一致
            showMessage('两次输入密码不一致，请重新确认', 'warning')
            return false
        }

        //调用修改用户密码接口
        updateAdminPassword(form).then((res) => {
            if (res.success == true) {
                //后端验证成功重置密码成功
                showMessage('修改密码成功，请重新登录！')
                //退出登录
                userStore.exitLogin()
                //隐藏对话框
                // dialogVisible.value = false
                formDialogRef.value.close()
                //跳转到登录页
                router.push('/login')
            } else {
                //获取服务端传出的错误消息
                let message = res.message
                showMessage(message, 'error')
            }
        }).finally(() => formDialogRef.value.closeBtnLoading())
    })
}

</script>
<style>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
}
</style>